<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/alipay.css">
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="./favicon.ico">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./fonts/font_k2ets6bvwt/iconfont.css">
    <!-- 引入初始化文件样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入公共样式文件 -->
    <link rel="stylesheet" href="./css/homepage.css">
    <title>支付宝支付</title>
</head>
<body>
    <div class="top-1">
        <p class="q">你好，欢迎使用支付宝付款！<span></span><a href="#">常见问题</a></p>
    </div>
    <div class="header q">
        <div class="alipay-logo"></div>
    </div>
    <div class="content q">
        <!-- 头部 -->
        <div class="Information">
            <div class="top">
                <p>正在使用即时到账交易[?]</p>
            </div>
            <div class="bottom">
                <div class="left">
                    <span class="xtx-e">小兔鲜儿</span>
                    <span class="xtx-collection"> 收款方：沙箱环境</span>
                </div>
                <div class="right"><span>7233.70</span> 元</div>
            </div>
        </div>
       <!-- 信息 -->
       <div class="box q">
            <div class="box-left">
                <p>收款方：<span>沙箱环境</span></p>
                <p>订单号：<span>646464454664</span></p>
                <p>商品名称：<span>兔仙<br>
                    \\<br>
                      \\_<br>
                  .---(')<br>
                o( )_-\_</span></p>
                <p>商品描述：<span>购买商品</span></p>
                <p>交易金额：<span>666.66</span></p>
            </div>
            <div class="box-right"><span>7233.70</span> 元</div>
       </div>
    </div>
     <!-- 登录部分 -->
     <div class="login q">
        <div class="dl-left">
            <p class="code">扫码支付</p>
            <p class="ewm"><img src="https://t.alipayobjects.com/tfscom/T1Z5XfXdxmXXXXXXXX.png" alt=""></p>
            
            <p class="wc">使用手机支付宝扫码完成付款</p>
            <p class="download">手机支付宝下载 <span>｜</span> 如何使用？</p>
        </div>
       
        <div class="dl-right">
            <div class="head">
                <h3>登录支付宝账号付款</h3>
                <a href="#">新用户注册</a>
            </div>
            <!-- 账号，密码 -->
            <div class="account">
                <p>账户名：</p>
                <span>忘记账户名？</span>
            </div>
            <input type="text" placeholder="用户名/邮箱" class="text" style="border: 1px solid #a6a6a6;">
            <p class="tishi">请填写账号</p>
            <div class="password">
                <p>支付密码：</p>
                <span>忘记密码？</span>
            </div>
            <input type="password" style="border: 1px solid #a6a6a6;" class="password">
            <p class="tishi">请填写密码</p>
            <p class="tips">请输入账户的<span>支付密码</span>，不是登录密码。</p>
            <a href="#" class="btn">下一步</a>
            <span class="details"><em>v</em>订单详情</span>
        </div>
    </div>
 <!-- 底部模块 -->
 <footer class="xtx_footer">
    <div class="xtx_contact">
        <!-- 联系模块 -->
        <div class="w">
            <dl class="clearfix">
                <dt>客户服务</dt>
                <dd class="contact_dd fl"><i class="iconfont icon-message-point
            "></i> 在线客服</dd>
                <dd class="contact_dd fl">
                    <i class="iconfont icon-question-mark-ring">
                    </i>
                    问题反馈
                </dd>
            </dl>
            <dl class="clearfix">
                <dt>关于我们</dt>
                <dd class="contact_dd fl"><i class="iconfont icon-a-wechatline
            "></i> 公众号</dd>
                <dd class="contact_dd fl">
                    <i class="iconfont icon-xinlangweibo
                    ">
                    </i>
                    微博
                </dd>
            </dl>
            <dl class="clearfix">
                <dt>下载APP</dt>
                <dd class="vxcode fl">
                    <img src="	http://erabbit.itheima.net/img/qrcode.5372a064.jpg" alt="">
                </dd>
                <dd class="app_download">
                    <span>扫描二维码</span>
                    <span>立马下载APP</span>
                    <a href="#">下载页面</a>
                </dd>
            </dl>
            <dl>
                <dt>服务热线</dt>
                <dd class="service_phone">
                    400-0000-000
                    <b>周一至周日 8:00-18:00</b>
                </dd>
            </dl>
        </div>
    </div>
    <!-- 底部其他 -->
    <div class="final_services">
        <div class="w">
            <!-- 口号 -->
            <div class="xtx_slogan">
                <a href="#">
                    <i class="iconfont icon-dakaidexiangzi"></i>
                    价格亲民
                </a>
                <a href="#">
                    <i class="iconfont icon-dianzan"></i>
                    物流快捷
                </a>
                <a href="#">
                    <i class="iconfont icon-wuliu"></i>
                    品质新鲜
                </a>
            </div>
            <!-- 版权 -->
            <div class="xtx_copyright">
                <p>
                    <a href="#" class="xtx_help">关于我们</a>
                    <a href="#" class="xtx_help">帮助中心</a>
                    <a href="#" class="xtx_help">售后服务</a>
                    <a href="#" class="xtx_help">配送与验收</a>
                    <a href="#" class="xtx_help">商务合作</a>
                    <a href="#" class="xtx_help">搜索推荐</a>
                    <a href="#" class="xtx_help">友情链接</a>
                </p>
                <p>CopyRight © 小兔鲜儿</p>
            </div>
        </div>
    </div>
</footer>
    <script src="./js/alipay.js"></script>
</body>
</html>